<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #canvas, #video {
            float: left;
            margin-right: 10px;
            background: #fff;
        }

        .box {
            overflow: hidden;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box">
    <video id="video" width="400" height="300"></video>
    <canvas id="canvas"></canvas>
</div>
<button id="live">直播</button>
<button id="snap">截图</button>
<script>
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let width = video.width;
    let height = video.height;
    canvas.width = width;
    canvas.height = height;

    function liveVideo() {
        let URL = window.URL || window.webkitURL;   // 获取到window.URL对象
        navigator.getUserMedia({
            video: {
                width: 1280,
                height: 720
            }
        }, function (stream) {
            video.srcObject = stream  // 将获取到的视频流对象转换为地址d
            video.play();   // 播放
            //点击截图
            document.getElementById("snap").addEventListener('click', function () {
                ctx.drawImage(video, 0, 0, width, height);
                let url = canvas.toDataURL('image/png');
                document.getElementById('download').href = url;
            });
        }, function (error) {
            console.log(error.name || error);
        });
    }

    document.getElementById("live").addEventListener('click', function () {
        liveVideo();
    });
</script>
</body>
</html>